<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
</head>

<body>
<div class="demoTable">
    搜索名字：
    <div class="layui-inline">
        <input autocomplete="off" class="layui-input" id="demoReload" name="id">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <!--        <button class="layui-btn layui-btn-sm" lay-event="select"><i class="layui-icon"></i></button>-->
        <!--        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i></button>-->
    </div>
</script>


<script id="sexTpl" type="text/html">
    {{#  if(d.gender === '女'){ }}
    <span style="color: #F581B1;">{{ d.gender }}</span>
    {{#  } else { }}
    <span style="color: cornflowerblue;">{{ d.gender }}</span>
    {{#  } }}
</script>


<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            id: 'demo',
            url: '/studentData/studentlist',
            data: true,
            page: true,
            toolbar: '#toolbarDemo',
            title: '用户数据表',
            loading: true,
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    title: 'ID',
                    fixed: 'left',
                    unresize: true,
                    sort: true,
                    totalRowText: '合计'
                }, {
                    field: 'name',
                    title: '学生'
                }, {
                    field: 'gender',
                    title: '性别',
                    templet: '#sexTpl'
                }, {
                    field: 'classes',
                    title: '班级'
                }
                ]
            ],
            error: function () {
                //重定向到登录界面
                alert('出现错误，请重新登录之后再试');
                window.location.href = "/index.html"
            }

        });
        // 搜索  查询的数据能够返回  但是不知道怎么显示

        //成绩编辑
        $('button').eq(0).click(() => {
            const name = String(document.getElementById("demoReload").value);
            console.log(name)
            // 搜素
            layui.use('table', () => {
                let table = layui.table;
                table.render({
                    elem: '#test'
                    , url: '/student/name'
                    , where: {name}
                    , display: null
                    , cols: [[{
                        type: 'checkbox',
                        fixed: 'left'
                    }, {
                        field: 'id',
                        title: 'ID',
                        fixed: 'left',
                        unresize: true,
                        sort: true,
                        totalRowText: '合计'
                    }, {
                        field: 'name',
                        title: '学生'
                    }, {
                        field: 'gender',
                        title: '性别',
                        templet: '#sexTpl'
                    }, {
                        field: 'classes',
                        title: '班级'
                    }
                    ]]
                });
            });
        });
    });
</script>

</body>

</html>